<template >
    <div class="form">
        <el-form ref="form" :disabled = "disabled" :model="form" label-width="100px" size="mini">
            <el-row :gutter="20">
                <!-- <el-col :span="8">
                    <el-form-item label="姓名：">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                </el-col> -->
                <el-col :span="8">
                    <el-form-item label="参加的考试：">
                        <el-select @change = "change" v-model="form.config_id" placeholder="请选择">
                            <el-option v-for="(it,i) in examData" :key="i" :label="it.name" :value="it.config_id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="考试时间：">
                        <el-date-picker :format = "'yyyy-MM-dd HH:mm:ss'" :value-format = "'yyyy-MM-dd HH:mm:ss'" v-model="form.exam_time" type="datetime" :placeholder="'请选择'" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="准考证号：">
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="考试省份：">
                        <el-select v-model="form.province" placeholder="请选择">
                            <el-option v-for="(it,i) in city" :key="i" :label="it.label" :value="it.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="width: 100%;height: 50px;">
                考试成绩
            </div>
            <vxe-table
          border
          resizable
          show-overflow
          :data="tableData"
          :edit-config="{trigger: 'click', mode: 'cell'}">
          
          <vxe-column field="config_id" title="科目" >
            <template #default="{ row }">
              <span>{{ row.config?row.config.name:'' || row.config_name  }}</span>
            </template>
            <!-- <template #edit="{ row }">
              <vxe-select v-model="row.config_id" transfer>
                <vxe-option v-for="item in subjectData" :key="item.name" :value="item.config_id" :label="item.label"></vxe-option>
              </vxe-select>
            </template> -->
          </vxe-column>
          <vxe-column field="score" title="成绩" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ row.score }}分</span>
            </template>
            <template #edit="{ row }" >
                <div style="width: 100%;display: flex;"> 
                    <vxe-input :disabled = "disabled" v-model="row.score" type="text" placeholder="请输入成绩"></vxe-input>分

                </div>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="240" v-if="!disabled">
            <template #default="{ row }">
              <vxe-button status="warning" content="删除" @click="removeRowEvent(row)"></vxe-button>
            </template>
          </vxe-column>
          
        </vxe-table>
        <div style="width: 100%;height: 50px;"></div>
            <el-form-item label="上传成绩截图：">
                <el-upload
                v-if="image==''&&!disabled"
                class="upload-demo"
                drag
                :show-file-list = "false"
                :action="$url+'/upload/upload'"
                multiple :on-change = "(file,fileList)=>upChange(file,fileList,form)">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <img style="width: 100%;" v-if="image!=''" :src="image" alt="">
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
// 省份js
import city from "../../../assets/js/city-data-level1"
// const city = require('../../../assets/js/city-data-level1');
export default {
    name: "tem",
    mixins: [pagePublic],
    props:{
        type:{
            type:String,
            default:'details'
        }
    },
    data() {
        return {
            city:city,
            $url:this.$url,
            image:'',
            tableData:[],
            subjectData:[] ,
            examData:[],
            disabled:true,
            form:{
                config_id:'',
                exam_time:'',
                // name:'',
                number:'',
                province:'',
                image:'',
                scores:[]
            },
            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        upChange(file,fileList,it){
            try {
                console.log(file.response.data,fileList,it,'upload111111')
                // it.image = file.response.data;
                this.image = file.response.data?file.response.data:''
                console.log(this.image,22222)
                // this.$refs.formBox.setImageUrl(this.uploadUrl)
            } catch (error) {
                
            }
        },
        change(e){
            if(e){
                this.examId = e
                this.tableData = []
                console.log(this.examId)
                this.getSubject()
            }else{
                this.examId = ''
                this.tableData = []
            }
        },
        getExam(){
            this.$api.study.score.exam().then((res)=>{
                this.examData = res.data||[]
                if(res.data&&res.data.length>0){
                    // this.examId = res.data[0].config_id
                }
            })
        },
        getSubject(){
            this.$api.study.score.subject({config_id:this.examId}).then((res)=>{
                this.subjectData = res.data||[]
                if(res.data&&res.data.length>0){
                    let i = 0
                    res.data.map(e=>{
                        
                        this.tableData.push({
                            idKey:i,
                            config_id:e.config_id,
                            config_name:e.name,
                            score:0,});
                            i++
                    })
                }
            })
        },
        // add(){
        //     this.$refs.form.validate((valid) => {
        //         if (valid) {
        //             let url = this.type == 'add'?this.$api.scores.add:this.$api.scores.edit
        //             url(this.form).then((res)=>{
        //                 if(res.status==200){
        //                     this.$message({
        //                         message: res.msg,
        //                         type:'success'
        //                     })
        //                     this.$emit('close')
        //                 }else{
        //                     this.$message({
        //                         message: res.msg,
        //                         type: 'error'
        //                     })
        //                 }
        //             })
        //         } else {
        //             console.log('error submit!!');
        //             return false;
        //         }
        //     });
        // },
        setValue(form,formData,rules,disabled){
            this.getExam()

            this.$nextTick(()=>{
                this.form = form
                // this.formData = formData
                // this.rules = rules
                console.log(this.formData,disabled,this.form,this.rules,3333333)
                this.disabled = disabled == 'details'?true:false;
                console.log(this.disabled)
                if(this.form&&this.form.scores_id){
                    this.getTable(this.form.scores_id)
                }else{
                    this.tableData = []
                }
            })
            
            
        },
        getTable(id){
            this.$api.study.score.subjectscore({scores_id:id}).then(res=>{
                this.tableData = res.data.data || []
            })
        },
        removeRowEvent(row){
            let idx = this.tableData.map(e=>e.idKey).indexOf(row.idKey);
            if(idx>-1){
                this.tableData.splice(idx,1);
            }
        },
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.scores = JSON.stringify(this.tableData);
                    this.form.image = this.image
                    this.$emit('submit',this.form);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
<style lang="scss" scoped></style>